<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>业主的页面列表</title>

    <!--引入Vue组件-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <!--引入Axios组件，用来发送异步http请求的-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <!-- 把json 数据转成form方式提交数据  后端方便获取数据 -->
    <script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>

</head>
<body>

<div id="app">

    <el-button type="danger" @click="batchDel"><i class="el-icon-delete"></i> 批量删除  </el-button>

    <el-form :inline="true" :model="ownerQueryDto" class="demo-form-inline">
        <el-form-item label="用户名">
            <el-input v-model="ownerQueryDto.username" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="性别">
            <el-select v-model="ownerQueryDto.sex" placeholder="性别">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="0"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="用户ID">
            <el-input v-model="ownerQueryDto.identity" placeholder="用户ID"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary"  icon="el-icon-search" @click="queryOwner">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table
            :data="owners"
            border
            style="width: 100%"
            @selection-change="handleSelectionChange">

        <!-- 多选框 -->
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>

        <el-table-column
                label="编号"
                prop="id"
                width="180">
        </el-table-column>
        <el-table-column
                label="姓名"
                prop="username"
                width="180">
        </el-table-column>
        <el-table-column
                label="电话"
                prop="tel"
                width="180">
        </el-table-column>

        <el-table-column
                align="center"
                label="性别"
                prop="sex"
                width="180">

            <!-- 让你 进行自定义的 (插槽) -->
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.sex == '0' ? 'primary' : 'success'">
                    {{scope.row.sex == '0' ? "女":"男"}}
                </el-tag>
            </template>

        </el-table-column>

        <el-table-column
                label="身份证"
                prop="identity"
                width="180">
        </el-table-column>

        <el-table-column
                label="备注"
                prop="remarks"
                width="180">
        </el-table-column>

        <el-table-column label="操作">

            <!-- 自定义的区域 插槽-->
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">
                    编辑
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-dialog title="编辑业主信息" :visible.sync="dialogFormVisible">
        <el-form :model="owner">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="owner.username"></el-input>
            </el-form-item>
            <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="owner.tel"></el-input>
            </el-form-item>
            <el-form-item label="备注" :label-width="formLabelWidth">
                <el-input v-model="owner.remarks"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateOwner">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el:"#app",
        data:{
            owners:[],
            dialogFormVisible: false,
            formLabelWidth: '120px',
            owner:{},
            multipleSelection:[],   //批量删除 数组
            ownerQueryDto:{}        //条件查询对象
        },
        methods:{

            //查询的方法
            queryOwner(){
                axios({
                    url:"/owner/list",
                    method:"get",
                    params:this.ownerQueryDto   // get请求 参数需要在url上面进行拼接 使用params 属性
                }).then(resp=>{
                    this.owners = resp.data.obj;
                })
            },

            //多选框出发的函数
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //批量删除的函数
            batchDel(){
                let ids = [];
                //拿到批量删除的id
                if (this.multipleSelection.length > 0 ){
                    for (let i = 0; i < this.multipleSelection.length; i++) {
                        ids.push(this.multipleSelection[i].id)
                    }
                    console.log(ids);
                    //发送数据
                    // axios({配置})
                    axios({
                        url:"/owner",     // 请求的服务地址
                        method:"delete",  // 请求的方法
                        data:ids          // 发送过去的参数
                    }).then(resp=>{
                        this.$message({
                            message: resp.data.msg,
                            type: 'success'
                        });
                        this.getData();
                    })
                }else{
                    this.$message({
                        message: "请选择数据",
                        type: 'success'
                    });
                }

            },

            //请求数据
            getData(){
                axios.get("/owner/list").then(resp=>{
                    this.owners = resp.data.obj;
                })
            },
            //修改操作
            handleEdit(index, row){
                //显示dialog
                this.dialogFormVisible = true;
                //把编辑的数据直接给到 this.owner 进行绑定就可以
                //把 row 对象转成json 字符串
                let str = JSON.stringify(row);
                this.owner = JSON.parse(str);
                //把sex 转成字符串  默认显示
                this.owner.sex= String(row.sex);

                //把不需要修改的数据进行清空
                this.owner.sex = "";
                this.owner.identity = "";
            },
            //更新操作
            updateOwner(){

                axios.put("/owner",this.owner).then(resp=>{

                    //关闭弹框、提示
                    this.dialogFormVisible = false;
                    //更新数据
                    this.$message({
                        message: resp.data.msg,
                        type: 'success'
                    });
                    this.getData();
                    //添加的数据表单对象清空
                    this.owner = {};

                })
            }
        },
        // vue 创建 会执行的方法
        created(){
            this.getData();
        }
    })
</script>

</body>
</html>